<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>分类</h1>
					<div id="box1" class="box">
						<h2>1. 创建 cate  分支</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：</p>
						<code-mirror :value="code.code1" :options="cmOptions"> </code-mirror>
					</div>
					<div id="box2" class="box">
						<h2>2. 渲染分类页面的基本结构</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：</p>
						<ol>
							<li>
								<p>定义页面结构如下：</p>
								<code-mirror :value="code.code2" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>动态计算窗口的剩余高度：</p>
								<code-mirror :value="code.code3" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>美化页面结构：</p>
								<code-mirror :value="code.code4" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box3" class="box">
						<h2>3. 获取分类数据</h2>
						<ol>
							<li>
								<p>在 data 中定义分类数据节点：</p>
								<code-mirror :value="code.code5" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>调用获取分类列表数据的方法：</p>
								<code-mirror :value="code.code6" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>定义获取分类列表数据的方法：</p>
								<code-mirror :value="code.code7" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box4" class="box">
						<h2>4. 动态渲染左侧的一级分类列表</h2>
						<ol>
							<li>
								<p>循环渲染列表结构：</p>
								<code-mirror :value="code.code8" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>在 data 中定义默认选中项的索引：</p>
								<code-mirror :value="code.code9" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>循环渲染结构时，为选中项动态添加 .active 类名：</p>
								<code-mirror :value="code.code10" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>为一级分类的 Item 项绑定点击事件处理函数 activeChanged：</p>
								<code-mirror :value="code.code11" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>定义 activeChanged 事件处理函数，动态修改选中项的索引：</p>
								<code-mirror :value="code.code12" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box5" class="box">
						<h2>5. 动态渲染右侧的二级分类列表</h2>
						<ol>
							<li>
								<p>在 data 中定义二级分类列表的数据节点：</p>
								<code-mirror :value="code.code13" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>修改 getCateList 方法，在请求到数据之后，为二级分类列表数据赋值：</p>
								<code-mirror :value="code.code14" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>修改 activeChanged 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值：</p>
								<code-mirror :value="code.code15" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>循环渲染右侧二级分类列表的 UI 结构:</p>
								<code-mirror :value="code.code16" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>美化二级分类的标题样式：</p>
								<code-mirror :value="code.code17" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box6" class="box">
						<h2>6. 动态渲染右侧的三级分类列表</h2>
						<ol>
							<li>
								<p>在二级分类的 <b>view</b> 组件中，循环渲染三级分类的列表结构：</p>
								<code-mirror :value="code.code18" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>美化三级分类的样式：</p>
								<code-mirror :value="code.code19" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box7" class="box">
						<h2>7. 切换一级分类后重置滚动条的位置</h2>
						<ol>
							<li>
								<p>在 data 中定义 滚动条距离顶部的距离：</p>
								<code-mirror :value="code.code20" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>动态为右侧的 <b>scroll-view</b> 组件绑定 scroll-top 属性的值：</p>
								<code-mirror :value="code.code21" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>切换一级分类时，动态设置 scrollTop 的值：</p>
								<code-mirror :value="code.code22" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box8" class="box">
						<h2>8. 创建 cate  分支</h2>
						<ol>
							<li>
								<p>为三级分类的 Item 项绑定点击事件处理函数如下：</p>
								<code-mirror :value="code.code23" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>定义事件处理函数如下：</p>
								<code-mirror :value="code.code24" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div id="box9" class="box">
						<h2>9. 分支的合并与提交</h2>
						<ol>
							<li>
								<p>将 cate 分支进行本地提交：</p>
								<code-mirror :value="code.code25" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地的 cate 分支推送到码云：</p>
								<code-mirror :value="code.code26" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地 cate 分支中的代码合并到 master 分支：</p>
								<code-mirror :value="code.code27" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>删除本地的 cate 分支：</p>
								<code-mirror :value="code.code28" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建 cate  分支" />
					<a-anchor-link href="#box2" title="2. 渲染分类页面的基本结构" />
					<a-anchor-link href="#box3" title="3. 获取分类数据" />
					<a-anchor-link href="#box4" title="4. 动态渲染左侧的一级分类列表" />
					<a-anchor-link href="#box5" title="5. 动态渲染右侧的二级分类列表" />
					<a-anchor-link href="#box6" title="6. 动态渲染右侧的三级分类列表" />
					<a-anchor-link href="#box7" title="7. 切换一级分类后重置滚动条的位置" />
					<a-anchor-link href="#box8" title="8. 创建 cate  分支" />
					<a-anchor-link href="#box9" title="9. 分支的合并与提交" />
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import {
		classifyView
	} from '../../util/code.js'
	export default {
		name: 'classifyView',
		data() {
			return {
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				},
				code: classifyView
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
